<template>
	<view class="super-gateway">
		<view class="super-gateway-title">
			<image src="@/static/icons/deviceset.png" mode=""
				style="width:30rpx;height:30rpx;padding-right:10prx;vertical-align:middle"></image>

			设备配置
		</view>
		<view class="super-gateway-label">
			带载设备数量
		</view>
		<view class="super-gateway-form">
			<up-input class="uni-input" v-model="WgInfo.gwDevCnt" placeholder="请输入带载设备数量" />
		</view>
		<!-- <view class="super-gateway-label">
			带载设备类型
		</view> -->
		<!-- <view class="super-gateway-form">
			<up-input class="uni-input" placeholder="请选择带载设备类型" />
		</view> -->
		<view class="super-gateway-btn" @click="gateNumber">
			保持配置
		</view>

		<view class="super-gateway-title">
			<image src="@/static/icons/parameterset.png" mode=""
				style="width:30rpx;height:30rpx;padding-right:10prx;vertical-align:middle"></image>
			参数配置
		</view>
		<view class="super-gateway-label">
			本机地址
		</view>
		<view class="super-gateway-form">
			<up-input class="uni-input" v-model="WgInfo.gwAddr" focus placeholder="请输入本机地址范围1~99" />
		</view>
		<view class="super-gateway-label">
			无线信道
		</view>
		<view class="super-gateway-form">
			<up-input class="uni-input" v-model="WgInfo.gwChannel" focus placeholder="请输入无线信道范围1-99" />
		</view>
		<view class="super-gateway-label">
			lora扩频因子
		</view>

		<view class="super-gateway-form">
			<uni-data-select v-model="WgInfo.gwSF" :localdata="gwSF" @change="changegwSF" placeholder="请选择lora扩频因子"
				:clear="false"></uni-data-select>
		</view>
		<view class="super-gateway-btn" @click="gateKeepset">
			保持配置
		</view>
		<view class="super-gateway-title">
			<image src="@/static/icons/devicelist.png" mode=""
				style="width:30rpx;height:30rpx;padding-right:10prx;vertical-align:middle"></image>
			设备列表
		</view>
		<view class="device-list" v-for="(item,index) in deviceList" :key="index">
			<view class="device-list-item">
				<view class="device-list-item-left">
					<image src="@/static/icons/dcn.jpg" mode="" style="width: 110rpx; height: 100rpx;">
					</image>
					<view class="device-list-item-name-part">
						<view class="device-list-item-name">
							<text style="color:#000;padding-right:15rpx">{{item.devName}}</text>
							<up-badge :type="item.devOnline == '1'?'success':'error'" :isDot="true"></up-badge><text
								style="font-size:22rpx;padding-left:10rpx">{{item.devOnline == '1'?'在线':'离线'}}</text>
						</view>
						<view class="">
							<text>{{item.deviceNo}}</text>
							<text style="padding-left:10rpx;">类型:</text>
							<text v-show="item.devType == '1'">两联供-交流</text>
							<text v-show="item.devType == '2'">空调温控器-交流</text>
							<text v-show="item.devType == '3'">地暖温控器</text>
							<text v-show="item.devType == '4'">两联供-直流</text>
							<text v-show="item.devType == '5'">空调温控器-直流</text>
							<text v-show="item.devType == '6'">空调交流lora</text>
							<text v-show="item.devType == '7'">空调KT两联供RS485</text>
						</view>
					</view>
				</view>

				<view class="list-btn" @click="addChild(item)">
					添加
				</view>
			</view>
		</view>
		<view class="">
			<up-modal :show="editChild" :showConfirmButton="true" :showCancelButton="true" :closeOnClickOverlay="true"
				:buttonReverse="true" @close="closeModal" @cancel="closeModal" @confirm="confirmModal"
				confirmColor="#25afe5">
				<view class="slot-content">
					<view class="">
						<view class="edit-child-title">
							设备名称
						</view>
						<view class="edit-device-name-input">
							<up-input v-model="editObj.devName" type="text" border="surround" />
							<view class="edit-device-name-input-error" v-show="editObj.devName == ''">
								设备名称不能为空
							</view>
						</view>
						<view class="">
							安装位置
						</view>
						<view class="edit-device-name-input">
							<up-input v-model="editObj.gwInstallLocation" type="text" border="surround" />
						</view>
						<view class="">
							备注信息
						</view>
						<view class="edit-device-name-input">
							<up-input v-model="editObj.devRemark" type="text" border="surround" />
						</view>
					</view>
				</view>
			</up-modal>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import {
		useUserStore
	} from '@/store/user'

	// 获取store实例
	const userStore = useUserStore()
	onShow(() => {
		gwSF.value = [];

		gwSF.value = uni.getStorageSync('sys_gwSF').map(item => ({
			text: item.dictLabel,
			value: Number(item.dictValue)
		}));
	})
	onLoad((options) => {
		let code = decodeURIComponent(options.id);
		if (code) {
			deviceId.value = code;
			getDevInfo(deviceId.value);
		}
		getDevInfoChild()
	});
	const itemId = ref(null)
	const deviceId = ref(-1)
	const WgInfo = ref({})
	const gwSF = ref([])
	const sfVal = ref('')
	const editChild = ref(false)
	const editObj = ref('')
	const deviceList = ref([])

	const getDevInfo = async (devId) => {
		uni.showLoading()
		let data = {
			devId: devId || deviceId.value
		}
		let res = await uni.$u.http.post('/wechat/getGwInfo', data)
		uni.hideLoading()
		if (res.success) {
			WgInfo.value = res.data
		} else {
			uni.showToast({
				title: res.message
			})
		}
	}

	const getDevInfoChild = async () => {
		let url = ''
		let data = {
			id: Number(deviceId.value),
			pageNum: 1,
			pageSize: 10
		}
		if (userStore.getUserInfo().isAdmin) {
			url = '/wechat/getDevListByGwForItem';
			data.itemId = userStore.getItemId();
		} else {
			url = '/wechat/getDevListByGwForPerson';
		}
		let res = await uni.$u.http.post(url, data)
		deviceList.value = res.data
	}
	const changegwSF = (val) => {
		sfVal.value = gwSF.value.find(item => item.value == val)?.text || ''
	}

	const gateNumber = async () => {
		uni.showLoading()
		let data = {
			id: deviceId.value,
			equipNo: WgInfo.value.equipNo,
			type: WgInfo.value.type,
			gwDevCnt: WgInfo.value.gwDevCnt
		}
		let res = await uni.$u.http.post('/wechat/editGwSend', data)
		uni.hideLoading()
		if (res.success) {

			uni.showToast({
				title: '保持带载设备数量配置成功'
			})
			setTimeout(() => {
				getDevInfo()
			}, 1500)

		}

	}

	const gateKeepset = async () => {
		uni.showLoading()
		let data = {
			id: deviceId.value,
			equipNo: WgInfo.value.equipNo,
			type: WgInfo.value.type,
			gwAddr: WgInfo.value.gwAddr,
			gwChannel: WgInfo.value.gwChannel,
			gwSF: WgInfo.value.gwSF
		}
		let res = await uni.$u.http.post('/wechat/editGwSend', data)
		uni.hideLoading()
		if (res.success) {
			uni.showToast({
				title: '保持配置成功'
			})
			setTimeout(() => {
				getDevInfo()
			}, 1500)
		}
	}
	const addChild = async (item) => {
		console.log(item)
		editChild.value = true;
		editObj.value = {
			...item
		}
	}

	const closeModal = () => {
		editChild.value = false;
		editObj.value = {}
	}
	const confirmModal = async () => {
		if (editObj.value.devName == '') {
			return
		}
		let url = ''
		let data = {
			id: Number(deviceId.value),
			devName: editObj.value.devName,
			devInstallLocation: editObj.value.devInstallLocation,
			devRemark: editObj.value.devRemark,
		}
		uni.showLoading()
		if (userStore.getUserInfo().isAdmin) {
			url = '/wechat/addBindGwDevForItem';
			data.itemId = userStore.getItemId();
		} else {
			url = '/wechat/addBindGwDevForPerson';
		}
		let res = await uni.$u.http.post('/wechat/editGwSend', data)
		uni.hideLoading()
		if (res.success) {
			getDevInfoChild()
			closeModal()
		}
	}
</script>

<style lang="scss" scoped>
	.super-gateway {
		padding: 0 40rpx;

	}

	.super-gateway-title {
		font-size: 32rpx;
		margin: 15rpx 0;
	}

	.super-gateway-label {
		font-size: 26rpx;
		color: #797979;
		margin: 20rpx 0;
	}

	.super-gateway-btn {
		background: #169BD5;
		text-align: center;
		color: #fff;
		border-radius: 20px;
		line-height: 60rpx;
		margin: 15rpx 0;
		font-size: 26rpx;
	}

	.super-gateway-form {
		margin: 15rpx 0;
	}

	.device-list {
		.device-list-item {
			background: #f7f7f7;
			border-radius: 10px;
			margin: 15rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			font-size: 22rpx;
			line-height: 45rpx;
			color: #797979;

			.device-list-item-left {
				display: flex;
				align-items: center;

				.device-list-item-name-part {
					margin-left: 10rpx;

					.device-list-item-name {
						font-size: 28rpx;
						line-height: 40rpx;
						display: flex;
						align-items: center;
					}
				}
			}

			.list-btn {
				color: #ffffff;
				background-color: #169BD5;
				width: 100rpx;
				line-height: 65rpx;
				height: 65rpx;
				text-align: center;
				border-radius: 8rpx;
				font-size: 28rpx;
			}

		}
	}

	.edit-device-name-input {
		margin: 15rpx 0;
	}

	.edit-device-name-input-error {
		color: red;
		font-size: 22rpx;
		margin-top: 10rpx
	}
</style>